<template>
    <div class="main-cell flexs" :style="{ marginBottom: bottom }">
        <div class="main-cell__left">
            <div class="left-title line-one">
                {{ title }} <span v-if="titleRight">- {{ titleRight }}</span>
            </div>
            <div class="left-tip">{{ tip }}</div>
        </div>
        <div class="main-cell__right">
            <slot name="right">
                <el-button :type="type === 1 ? 'info' : 'primary'" size="mini" @click="onClick">{{ btnText }}</el-button>
            </slot>
        </div>
    </div>
</template>

<script setup>
/**
 * 带有灰色背景的左文右操作状态的容器
 * @param {String} title 左侧标题文字
 * @param {String} titleRight 左侧标题右边的文字
 * @param {String} bottom 默认16px
 * @param {String} tip 左侧提示文字
 * @param {String} type 按钮类型
 * @param {String} btnText 按钮文字
 * @param {Function} clicks 按钮点击事件
 */
const props = defineProps({
    title: {
        type: String,
        default: "",
    },
    bottom: {
        type: String,
        default: "16px",
    },
    titleRight: {
        type: String,
        default: "",
    },
    tip: {
        type: String,
        default: "",
    },
    type: {
        type: Number,
        default: 2,
    },
    btnText: {
        type: String,
        default: "去授权",
    },
})
const emits = defineEmits(["click"])
const onClick = () => {
    emits("click")
}
</script>

<style lang="less" scoped>
.main-cell {
    position: relative;
    min-height: 24px;
    padding: 15px 20px;
    background: #f7f8fa;
    overflow: hidden;
    border-radius: 2px;
    .main-cell__left {
        flex: 1;
        max-width: 800px;
        .left-title {
            font-size: 15px;
            font-weight: 700;
            color: @gray-8;
            line-height: 22px;
        }
        .left-tip {
            font-size: 14px;
            color: #666;
            line-height: 22px;
        }
    }
    .main-cell__right {
        flex: none;
    }
}
</style>